<template id='importLoading'>
    <div class="ImportLoading">
        <div class="pc disCenter">
            <transition :name="options.cardTransition">
                <div class="content" @click.stop v-show="options.isShow">
                    <p class="contentTitle">Importing Highlights from Amazon Kindle/Kobo</p>
                    <div class="tips colCenter">
                        <p :class="{ textAnimation: step >= 1 }" @animationend="stepFininsh">Uploading</p>
                        <p :class="{ textAnimation: step >= 2 }" @animationend="stepFininsh">Parsing Data</p>
                        <p :class="{ textAnimation: step >= 3 }" @animationend="stepFininsh"> Looking for Duplicates</p>
                        <p :class="{ textAnimation: step >= 4 }" @animationend="stepFininsh">Creating Entries</p>
                        <p :class="{ textAnimation: step >= 5 }" @animationend="stepFininsh">Deleting Temporary Files
                        </p>
                    </div>
                    <div class="loading">
                        <ZyLoading :options="isLoading" />
                    </div>
                    <div class="progress">
                        <div class="inside" :style="{ width: progressWidth }"></div>
                    </div>
                </div>
            </transition>
        </div>
    </div>
</template>

<script>
import ZyLoading from '../../../components/pc/ZyLoading.vue'
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { showMessage, isPhone } from "@/utils";
import { createNamespacedHelpers } from "vuex";
const common = createNamespacedHelpers("common");
export default {
    name: '',
    components: {
        ZyLoading
    },
    props: {
        options: {
            type: Object,
        },
    },
    // 定义属性
    data() {
        return {
            progressWidth: 0,
            isLoading: true,
            step: 1,
        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
        ...common.mapState(['userInfo']),
    },
    // 监控data中的数据变化
    watch: {
        options: {
            handler(newName) {
                if (newName.isShow) {
                    this.isLoading = true
                    setTimeout(() => {
                        this.getProgress()
                    }, 1000)

                } else {
                    this.isLoading = false;
                    this.progressWidth = 0
                    this.step = 1
                }
            },
            immediate: true,
            deep: true,
        }
    },
    // 方法集合
    methods: {
        stepFininsh() {
            this.step++
        },
        getProgress() {
            let time = 0
            let intervalId = setInterval(() => {
                time++
                if (time <= 80) {
                    this.progressWidth = time + "%"
                } else {
                    console.log(this.options);
                    if (this.options.name == 'txt') {
                        this.importTxt();

                    } else if (this.options.name == 'sql') {
                        this.importSqlite();
                    }
                    clearInterval(intervalId)
                    return
                }
            }, 30)
        },
        getSurplus(res) {
            let time = 80
            let intervalId = setInterval(() => {
                time++
                if (time <= 100) {
                    this.progressWidth = time + "%"
                } else {
                    this.$emit('isFinish', res)
                    clearInterval(intervalId)
                }
            }, 30)
        },
        async importSqlite() {
            let formData = new FormData();
            for (let i = 0; i < this.options.files.length; i++) {
                formData.append('file', this.options.files[i]);
            }
            formData.append(
                "userId", this.userInfo.userId
            );
            let res = await this.$api.home.importSqliteApi(formData)
            this.getSurplus(res)
            // if (this.$isCode(res)) {

            // }
        },
        async importTxt() {
            let formData = new FormData();
            for (let i = 0; i < this.options.files.length; i++) {
                formData.append('file', this.options.files[i]);
            }
            formData.append(
                "userId", this.userInfo.userId
            );
            let res = await this.$api.home.importTxtApi(formData)
            this.getSurplus(res)

            // if (this.$isCode(res)) {
            //     this.$emit('importFiles')
            // }
        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() { }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.ImportLoading {
    user-select: none;

    .pc {
        .content {
            width: 869px;
            height: 600px;
            background-color: #ffffff;
            box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
                0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12);
            border-radius: 12px;
            border: solid 1px #888888;
            padding: 30px;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;

            .contentTitle {
                margin-top: 10px;
                color: @tColor;
                font-size: 24px;
            }

            .tips {
                margin-top: 190px;

                p {
                    opacity: 0;
                    color: @dColor;
                    font-size: 18px;
                    margin-top: 10px;
                }

                .textAnimation {
                    -webkit-animation: text-focus-in 0.85s ease forwards;
                    animation: text-focus-in 0.85s ease forwards;
                }
            }

            .loading {
                position: absolute;
                top: 174px;
            }

            .progress {
                margin-top: 24px;
                width: 668px;
                height: 21px;
                background-color: rgba(168, 168, 168, 0.1);
                border-radius: 4px;

                .inside {
                    height: 21px;
                    border-radius: 4px;
                    background-color: @tColor;
                }
            }
        }
    }
}

@media screen and (max-width: 980px) {
    .ImportLoading {
        .pc {
            .content {
                width: auto;

                .progress {
                    width: 608px;
                    margin-left: 30px;
                    margin-right: 30px;

                }
            }
        }

    }
}
</style>